<template>
  <div>
    <div class="userName">
      <svg
        class="icon"
        width="25"
        height="25"
        viewBox="0 0 1024 1024"
        xmlns="http://www.w3.org/2000/svg"
        data-v-365b8594=""
      >
        <path
          fill="currentColor"
          d="M628.736 528.896A416 416 0 01928 928H96a415.872 415.872 0 01299.264-399.104L512 704l116.736-175.104zM720 304a208 208 0 11-416 0 208 208 0 01416 0z"
        ></path>
      </svg>
      <el-input
        placeholder="账号"
        v-model="userName"
        clearable
        @change="saveUserName"
        @input="saveUserName"
      >
      </el-input>
    </div>
    <div class="passWord">
      <svg
        class="icon"
        width="25"
        height="25"
        viewBox="0 0 1024 1024"
        xmlns="http://www.w3.org/2000/svg"
        data-v-365b8594=""
      >
        <path
          fill="currentColor"
          d="M224 448a32 32 0 00-32 32v384a32 32 0 0032 32h576a32 32 0 0032-32V480a32 32 0 00-32-32H224zm0-64h576a96 96 0 0196 96v384a96 96 0 01-96 96H224a96 96 0 01-96-96V480a96 96 0 0196-96z"
        ></path>
        <path
          fill="currentColor"
          d="M512 544a32 32 0 0132 32v192a32 32 0 11-64 0V576a32 32 0 0132-32zM704 384v-64a192 192 0 10-384 0v64h384zM512 64a256 256 0 01256 256v128H256V320A256 256 0 01512 64z"
        ></path>
      </svg>
      <el-input
        v-model="userPwd"
        placeholder="Please input password"
        show-password
        @change="savePwd"
        @input="savePwd"
      />
    </div>
    <el-checkbox v-model="isRemenberPwd">记住密码</el-checkbox>
    <el-row>
      <el-button
        color="#626aef"
        style="color: white"
        size="medium"
        @click="handleLogin"
        round
        :loading="isLoading"
      >
        登 录
      </el-button>
    </el-row>
  </div>
</template>

<script>
import { loginWithPhone } from "../../../netWork/easeRequest/easeLoginServer";
export default {
  name: "LoginWithPhone",

  data() {
    return {
      // 账号
      userName: "",
      userPwd: "",
      loginData: "",
      // 记住密码
      isRemenberPwd: true,
      isLoading: false,
    }
  },

  mounted() {},

  created() {
    let that = this;
    // 是否存储过用户名和密码
    let userInfo = JSON.parse(localStorage.getItem("userInfo"));
    if (userInfo) {
      that.userName = userInfo.userName;
      if (userInfo.userPwd) {
        that.userPwd = userInfo.userPwd;
      }
    }
  },

  methods: {
    // 获取时间戳
    getTime() {
      let timestamp = new Date().getTime();
      return timestamp;
    },
    // 记账号
    saveUserName(e) {},
    // 记密码
    savePwd(e) {},
    // 登录
    handleLogin() {
      // 手机号登录
      let that = this
      that.isLoading = true
      loginWithPhone(that.userName, that.userPwd, that.getTime()).then(
        (res) => {
          console.log('登录页面请求的用户数据==>>>', res.data)
          if (res.status == "200") {
            if (res.data && res.data.code == "502") {
              that.$message({
                type: "error",
                message: res.data.message,
              })
              that.isLoading = false
            } else {
              that.$message({
                type: "success",
                message: "登陆成功",
              })
              that.isLoading = false
              that.loginData = res.data;
              localStorage.setItem("userData", JSON.stringify(that.loginData));
              setTimeout(() => {
                that.$router.replace({
                  path: "/home",
                })
              }, 1000)
            }
          }
        }
      )
      // 存储账号和密码
      let userInfo = {
        userName: that.userName,
      };
      if (that.isRemenberPwd) {
        userInfo.userPwd = that.userPwd;
        localStorage.setItem("userInfo", JSON.stringify(userInfo));
      } else {
        localStorage.setItem("userInfo", JSON.stringify(userInfo));
      }
    },
  },
};
</script>




<style lang="less" scoped>
.userName {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #dddfe6;
  border-radius: 7px;
}
.passWord {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #dddfe6;
  border-radius: 7px;
  margin: 10px 0;
}
</style>